// 纹理：


import React, { Component } from 'react';
import './index.css';
import * as THREE from 'three';    //引入three基础相关的所有模块
import { Scene } from 'three';
import Stats from 'three/examples/js/libs/stats.min.js';  //引入状态监测
import TWEEN from "@tweenjs/tween.js";
import * as dat from 'dat.gui';
import Background from '../../assets/image/background.png'


 
class Three4 extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
  
    initThree = () => {   // 初始化，准备数据  四大组件：场景、相机、渲染器、几何体
        threeStart();

        var renderer,width,height,stats;
        // var width = '500px';
        // var height = '500px';
        function initRender() {   // 3、初始化 渲染器render
            width = window.innerWidth;
            height = window.innerHeight;
            renderer = new THREE.WebGLRenderer({
                antialias: true   // 如果数据量非常大，设置为false为提高性能
            });
            renderer.setSize(width, height);   // 设置 渲染器的大小（页面大小）
            document.getElementById('canvas-frame').appendChild(renderer.domElement);  // 将渲染器渲染的内容添加到窗口上（固定写法）
            renderer.setClearColor(0xFFFFFF, 1.0);  // 设置渲染器颜色（清除时）
        }

        var scene;
        function initScene() {    // 1、初始化 场景sence
            scene = new THREE.Scene();
        }

        var camera;
        function initCamera() {   // 2、初始化 相机camera 
            //（透视相机） PerspectiveCamera( fov, aspect, near, far ): 视角的度数，显示范围的宽高比，最近的距离，最远看到的距离
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight , 1, 1000);    //window.innerWidth / window.innerWidth   width/height

           /// 设置相机 的位置(position/up/lookat 三个方向确定了相机的唯一位置方向)
            camera.position.set(600,0,600)   // 400,400,400
            camera.up.set(0,1,0);  // 垂直于快门的一条线（相机上面）   (up与lookat两个方向一定是垂直的90度!!!!)
            camera.lookAt(0,0,0);  // 代表一个方向，而不是一个点，(垂直于镜头的一条线)
        }
 
 
       

        var light;
        function initLight() {  // 初始化 灯光
          // 1、环境光：不分位置position，直线传播
          light = new THREE.AmbientLight(0xFFFF8F);  // 接收一个颜色，需要与物体的颜色有同一基础色的分量才能反射
          light.position.set(300, 300, 0);
          scene.add(light);   // 将光源加到场景sence中
        }

 
        var mesh,texture;
        function initObject() {   ///4、定义一个几何体，显示在页面上的物体
          // 长方形
          var geometry = new THREE.PlaneGeometry(500, 300);  
          var material;
          const loader = new THREE.TextureLoader();  // 创建一个加载器loader
          loader.load(      // 加载一个资源（纹理）
            Background,   // 资源URL,图片
            function ( text ) {   // onLoad回调  异步加载!!!!!!!!!!!!!
              texture = text;

              //texture.wrapS = texture.wrapT = THREE.RepeatWrapping;  // 设置默认纹理的 回环方式（重复方式1000）
              //texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;  // 设置默认纹理的 回环方式（边缘拉伸方式1001）
              //texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;  // 设置默认纹理的 回环方式（镜像方式1002）

              var material = new THREE.MeshBasicMaterial( {  // 定义材质
                map: texture  // 映射纹理
              });
              mesh = new THREE.Mesh(geometry, material);  // 几何体 和 材质 一起组成 网格模型（显示出来的物体都是网格模型）（3、必须）
              mesh.position.set(0, 0, 0);   // 网格模型的位置
              scene.add(mesh);  // 将网格模型添加到 场景中 进行显示（4、必须）
            },
            function ( err ) {   // onError回调
              console.error( 'An error happened.' );
            }
          );

          var axisHelper = new THREE.AxisHelper(400);  // 添加一个坐标系，长度为400
          scene.add(axisHelper);
        } 

        var param;
        function createUI() {  
          var ParamObj = function(){   // 默认视角为45度
            this.repeat = 1;  // 纹理材质，重复
            this.wrap = 1000;  // 纹理材质，回环
          }  
          param = new ParamObj();  
          var gui = new dat.GUI();
          gui.add(param,"repeat",1,5).name("纹理重复");
          gui.add(param,"repeat",1,5).name("纹理重复");
          gui.add(param,"repeat",1,5).name("纹理重复");
          gui.add(param,"wrap",1000,1002).name("纹理回环").step(1); // 不能有小数，每次加1
        }

        function change() {  
          if(texture != null){  // 如果 纹理素材 不为空
            // 设置重复
            texture.repeat.x = texture.repeat.y = param.repeat;   // 改变 纹理的重复 参数

            texture.wrapS = texture.wrapT = param.wrap;   // 改变 纹理的回环方式（必须更新纹理才能正常显示）
            texture.needsUpdate = true;  // 更新纹理
          }
        }
        
        
        function animation() {   //  渲染函数
          change();

          renderer.render(scene, camera);    // 通过场景sence和相机crame一起，用 渲染器 渲染出来
          requestAnimationFrame(animation);  // 当render函数空闲时，不断地调用该函数进行渲染，（可实现渲染效果）
  
        }
 
        function threeStart(){
          initScene();   // 场景
          initCamera();  // 相机
          initRender();  // 渲染器
          initObject();  // 几何体
          initLight(); // 光
          animation();  // 渲染函数 
          createUI();
         
        }
    }
 
    /**
     * 开始Three
     *
     * @memberof ThreeBim
     */
    componentDidMount(){
        this.initThree();
    }
    render() {
        return (
          <div id='canvas-frame'></div>
        );
    }
}
 
export default Three4;